import React, { useState,useEffect } from 'react';
import Pagecomponent from './Pagecomponent';
import './Users.css'

var pageNum;
const Users = () => {
  //分页
  const [dataList, setDataList] = useState([]);
  const [totalPage, setTotalPage] = useState(15);

  const [users,setUsers] = useState([]);


  useEffect(()=>{
    fetch(`https://api.124ss.xyz:2355/home?rand=$1`,{
      method: "GET",
      mode: "cors",
      headers: {
        "Content-Type": "text/plain"
      }

    }).then(res => {
      return res.json();
    })
    .then(res =>{
      var arr = [];
      var userObj = [];
      res.forEach((item,index) => {
        userObj = [
          item['open_id'],
          item['user_name'],
          item['user_image']
        ]
        arr.push(userObj)
      });
      setUsers(arr)
    } )
    .catch((err)=>{
      console.log("err:",err);
    })
  },[]
)

  const getCurrentPage = (currentPage) => {
    setDataList(users[currentPage-1])
    pageNum = currentPage;
  }
  

  const DelItem = (idx,item) => {
  
    fetch(`https://api.124ss.xyz:2355/delUsers/${item[0]}`,{
      method: "delete",
      mode: "cors",
      headers: {
        "Content-Type": "text/plain"
      },
      body: JSON.stringify({
        open_id: item[0]
      })

    }).then(res => {
      return res.text();
    })
    .then(res =>{
      console.log(res)
    } )
    .catch((err)=>{
      console.log("err:",err);
    })

    let newUsers = users.filter((_,index)=>idx!=index);
    setUsers(newUsers);

  }

  return (
    <div >
      <div id="nav">
        <p style={{fontFamily: 'SimSun'}}>用户管理</p>
      </div>
      <table>
        <thead>
        <tr>
          <th style={{paddingLeft: 100, fontSize: 25, fontFamily: 'SimSun'}}>用户头像</th>
          <th style={{paddingLeft: 60, fontSize: 25, fontFamily: 'SimSun'}}>OPENID</th>
          <th style={{paddingLeft: 60, fontSize: 25, fontFamily: 'SimSun'}}>用户名</th>
          <th style={{paddingLeft: 60, fontSize: 25, fontFamily: 'SimSun'}}>操作</th>
        </tr>
        </thead>
        <tbody>
        {
          users.slice(5*(pageNum-1),5*pageNum).map((item, index) =>
            <tr>
              <td style={{paddingTop: 20,paddingLeft: 100,textAlign: 'center'}}>
                <img style={{width: 50, height: 50}} src={item[2]} />
              </td>
              <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center',fontFamily: 'KaiTi'}}>{item[0]}</td>
              <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center'}}>{item[1]}</td>
              <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center'}}>
                <button onClick={() => DelItem(index,item)}>
                  删除
                </button>
              </td>
            </tr>)
            
        }
        </tbody>
        </table>
      <div style={{position: 'absolute', bottom: 15, left:510}}>
        <Pagecomponent totalPage={totalPage} pageCallbackFn={getCurrentPage}/>
      </div>
    </div>
  )

}

export default Users
